<template>
    <div class="box-light">
        <el-row :gutter="2">
            <el-col :span="24">
                <el-form :model="form" ref="ruleFormRef" :rules="rules" max-height="68vh" label-width="80px" status-icon>
                    <el-form-item label="账户名" prop="username">
                        <el-input v-model="form.username" placeholder="中日英韩" clearable required />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" placeholder="1大写，1小写，1数字，1特殊符号，长度12-18字符" type="password"
                            show-password clearable required />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="validatePwd">
                        <el-input v-model="form.validatePwd" placeholder="保证密码一致" type="password" show-password clearable
                            required />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" clearable required />
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-space warp>
                            <el-input v-model="form.code" clearable required />
                            <el-button type="primary">发送验证码</el-button>
                        </el-space>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">开 通</el-button>
                        <el-button @click="resetForm(ruleFormRef)">取 消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// 防抖函 数
import debounce from '@/utils/debounce';
import { ref } from 'vue';
import { ElSpace, ElMessage, ElButton, ElFormItem, ElForm, ElInput, ElRow, ElCol } from 'element-plus';
import { usernameRule, passwordRule, emailRule, codeRule } from '@/utils/validate';
import { register } from '@/Apis/modules/login'

// 表单数据
const ruleFormRef = ref();
const form = ref({
    username: '',
    password: '',
    validatePwd: '',
    email: '',
    code: '',
})

// 验证两个密码是否一致
const validatePwdRule = async (rule, value, callback) => {
    if (!value) {
        callback(new Error('密码不能为空！'))
    } else if (value !== form.value.password) {
        callback(new Error('两次输入的密码不一致!'));
    } else {
        callback();
    }
};

// 正则验证
const rules = ref({
    username: [{ required: true, validator: usernameRule, trigger: 'blur' }],
    password: [{ required: true, validator: passwordRule, trigger: 'blur' }],
    validatePwd: [{ required: true, validator: validatePwdRule, trigger: 'blur' }],
    email: [{ required: true, validator: emailRule, trigger: 'blur' }],
    code: [{ required: true, validator: codeRule, trigger: 'blur' }],
})

// 提交表单
const submitForm = debounce(async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const { username, password, email, code, roles } = form.value
            const data = { username, password, email, code, roles };

            await register(data);
        } else {
            ElMessage.error('验证未通过!');
        }
    })
})

// 重置表单
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>